<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Docking</title>
    <style>
      html,body {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #eee;
      }
      .container {
        margin: 20px auto;
        width: 70%;
        background-color: #fff;
        box-shadow: 3px 3px 0 #ddd;
        border-radius: 8px;
        font-size: 0;
        padding: 20px 20px 40px 20px;
      }
      h1 {
        text-align: center;
        font-size: 20px;
        padding: 0 0 0 20px;
        margin: 0;
      }
      .param-container {
        width: 100%;
        font-size: 0;
      }
      .row {
        font-size: 14px;
        line-height: 14px;
        height: auto;
        font-size: 0;
        border-bottom: 1px solid #ddd;
      }
      .item {
        display: inline-block;
        font-size: 14px;
        line-height: 14px;
        width: 50%;
        vertical-align: top;
        background-color: transparent;
        padding: 0;
        box-sizing: border-box;
        text-align: center;
        padding: 10px 0 10px;
      }
    </style>
</head>
<body>
    <div class="container">
      <h1 id="pageType"></h1>
      <div class="param-container">
        <div class="row">
          <div class="item" style="font-weight: bold;">Key</div>
          <div class="item" style="font-weight: bold;">Value</div>
        </div>
        <div class="row">
          <div class="item">tabType</div>
          <div class="item" id="tabType">/</div>
        </div>
        <div class="row">
          <div class="item">name</div>
          <div class="item" id="name">/</div>
        </div>
        <div class="row">
          <div class="item">status</div>
          <div class="item" id="status">/</div>
        </div>
        <div class="row">
          <div class="item">title</div>
          <div class="item" id="title">/</div>
        </div>
        <div class="row">
          <div class="item">phone</div>
          <div class="item" id="phone">/</div>
        </div>
        <div class="row">
          <div class="item">email</div>
          <div class="item" id="email">/</div>
        </div>
        <div class="row">
          <div class="item">faceBook</div>
          <div class="item" id="weixin">/</div>
        </div>
        <div class="row">
          <div class="item">province</div>
          <div class="item" id="province">/</div>
        </div>
        <div class="row">
          <div class="item">city</div>
          <div class="item" id="city">/</div>
        </div>
        <div class="row">
          <div class="item">address</div>
          <div class="item" id="address">/</div>
        </div>
        <div class="row">
          <div class="item">note</div>
          <div class="item" id="note">/</div>
        </div>
        <div class="row">
          <div class="item">web</div>
          <div class="item" id="web">/</div>
        </div>
        <div class="row">
          <div class="item">sex</div>
          <div class="item" id="sex">/</div>
        </div>
        <div class="row">
          <div class="item">age</div>
          <div class="item" id="age">/</div>
        </div>
        <div class="row">
          <div class="item">birth</div>
          <div class="item" id="birth">/</div>
        </div>
        <div class="row">
          <div class="item">displayName</div>
          <div class="item" id="displayName">/</div>
        </div>
        <div class="row">
          <div class="item">exten</div>
          <div class="item" id="exten">/</div>
        </div>
        <div class="row">
          <div class="item">callSheetId</div>
          <div class="item" id="callSheetId">/</div>
        </div>
        <div class="row">
          <div class="item">accountId</div>
          <div class="item" id="accountId">/</div>
        </div>
        <div class="row">
          <div class="item">token</div>
          <div class="item" id="token">/</div>
        </div>
        <div class="row">
          <div class="item">tokenId</div>
          <div class="item" id="tokenId">/</div>
        </div>
      </div>
    </div>
</body>
<script>
  setValue(getUrlParam())
  function setValue (obj) {
    for (let i in obj) {
      if (document.getElementById(i)) {
        if (i === 'pageType') {
          document.getElementById(i).innerHTML = obj[i] + ' Integration'
        } else {
          document.getElementById(i).innerHTML = obj[i] || '/'
        }
      }
    }
  }
  function getUrlParam (urlStr) {
    let url = ''
    let paramObj = {}
    if (typeof urlStr === 'undefined') {
      url = decodeURI(window.location.search)
    } else {
      url = '?' + urlStr.split('?')[1]
    }
    if (url.indexOf('?') !== -1) {
      let str = url.substr(1)
      let strs = str.split('&')
      for (var i = 0; i < strs.length; i++) {
        paramObj[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
      }
    }
    return paramObj
  }

</script>
</html>